<template>
  <div class="marks" ref="marksRef">
    <!-- 标题区域 -->
    <van-sticky ref="stickyRef">
      <header-component :title="title" :showPre="false" :titleSlide="titleSlide">
        <template #operate>
          <van-search
            v-model="wordKey"
            clearable
            background="#efefeff2"
            placeholder="快速查找"
          />
        </template>
      </header-component>
    </van-sticky>
    <!-- 主体内容区 -->
    <van-pull-refresh v-model="loading" @refresh="onRefresh" success-text="刷新成功">
      <section v-if="true">
        <tag-list class="tag-list" :content="data.notTag"/>
        <CompactCard :show-bottom="false" :showMark="true" :show-tags="false" :content="data.collectData" :imgWidth="'4rem'" :imgHeight="'4rem'" :contentLine="1"></CompactCard>
      </section>
      <van-empty
          v-else
          image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
          image-size="80"
          description="空列表"
      />
    </van-pull-refresh>

  </div>
</template>

<script>
export default { name: "home" };
</script>

<script setup>
import HeaderComponent from "@/components/header/index.vue";
import {reactive, ref, watch} from "vue";
import {useScrollWatch,useScrollWatch2} from "@/hooks/userScrollWatch.js";
const title = ref("标注");
const wordKey = ref(null);
import TagList from '@/components/list/tagList.vue'

const data = new reactive({
  wordKey: '',
  CollectTitle: '所有标注',
  notTag: [
    {
      "createBy": "1655495937@qq.com",
      "createTime": "2023-03-25 14:06:45",
      "updateBy": "1655495937@qq.com",
      "updateTime": "2023-03-25 15:43:44",
      "remark": null,
      "collectId": "1089188628518666240",
      "title": null,
      "name": "所有标注",
      "icon": "fa-solid fa-tag",
      "iconColor": "",
      "uId": 107,
      "status": null,
      "url": "/detail?name=23",
      "totalNum": 1,
      "operate": null,
      "info": null,
      "collectType": 1,
      "tagName": "首选项",
      "tagColor": "",
      "tagBgColor": "#FDC830"
    },
  ],
  // contentList
  collectData:[
    {
      articleId: '1',
      images: 'https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cda62ee99c6a4573b68884744bcf224b~tplv-k3u1fbpfcp-zoom-crop-mark:1512:1512:1512:851.awebp?',
      articleTitle: 'protobuf太好用，java之父叫我改用grpc',
      articleContent: '在上篇文章中，我们介绍了如何使用 Redis 存储 Protobuf 格式的数据。本文将介绍在 RPC 中也用上 Protobuf。\n' +
          '在一般项目架构中，前后端交互使用Json格式，后端服务间交互使用Protobuf格式。这样的原因是：\n' +
          '\n' +
          '前端大多数框架对于Json格式的数据是可以直接渲染的\n' +
          '而后端数据交互一般是为了序列化和反序列化，考虑更多是并发，带宽等，又由于Google的gRPC框架集成了Protobuf，并且gRPC有跨语言、低带宽、HTTP/2等优点。目前主流的Go语言也是谷歌旗下的，Go+gRPC几乎是不二之选（你要是用thrift，当我在放屁）3.Spring Cloud的OpenFeign也是支持HTTP/2+Protobuf的，但是还是不能跨语言，这里就不展开说了。\n' +
          '\n' +
          '作者：会飞的蛋蛋面\n' +
          '链接：https://juejin.cn/post/7225190353737334844\n' +
          '来源：稀土掘金\n' +
          '著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。',
      tags: ['标签1','标签2','标签3','标签4','标签5'],
      originIcon: 'mp.weixin.qq.com',
      mark:1
    },
    {
      articleId: '1',
      images: 'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1d1852ae3ec249bdac20d790cbd0da68~tplv-k3u1fbpfcp-zoom-crop-mark:1512:1512:1512:851.awebp?',
      articleTitle: '太强了！一个注解解决数据脱敏问题',
      articleContent: '本文主要分享什么是数据脱敏，如何优雅的在项目中运用一个注解实现数据脱敏，为项目进行赋能。希望能给你们带来帮助。😀',
      tags: ['标签1','标签2','标签3','标签4','标签5'],
      originIcon: 'mp.weixin.qq.com',
      mark:2
    },
    {
      articleId: '1',
      images: 'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba7abb679eb04c14a83b9a6aa1c6b1ac~tplv-k3u1fbpfcp-zoom-crop-mark:1512:1512:1512:851.awebp?',
      articleTitle: '利用ChatGPT快速学习kafka',
      articleContent: '前言\n' +
          '本文通过ChatGPT,用是什么？为什么？实现原理？怎么用？常见问题？来快速学习新知识。',
      tags: ['标签1','标签2','标签3','标签4','标签5'],
      originIcon: 'mp.weixin.qq.com',
      mark:3
    },
    {
      articleId: '1',
      images: 'https://bs.zhxu.cn/logo.png',
      articleTitle: 'Spring Boot项目打成 .exe 程序? 实战来了！Spring Boot项目打成 .exe程序? 实战来了！',
      articleContent: '比 MyBatis 效率快 100倍的条件检索引擎，天生支持联表，使一行代码实现复杂列表检索成为可能！比MyBatis 效率快 100倍的条件检索引擎，天生支持联表，使一行代码实现复杂列表检索成为可能！',
      tags: ['标签1','标签2','标签3','标签4','标签5'],
      originIcon: 'mp.weixin.qq.com',
      mark:4
    },
  ]
})

/** 下拉刷新 */
const loading = ref(false);
const onRefresh = () => {
  setTimeout(() => {
    loading.value = false;
  }, 1000);
};

/** 标题动画相关的操作 */
const marksRef = ref();
const stickyRef = ref();
let titleSlide = useScrollWatch(marksRef)
useScrollWatch2(titleSlide,stickyRef)
</script>

<style lang="less" scoped>

.marks {
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  padding-bottom: 160px;

  :deep(.van-pull-refresh){
    position: relative;
    top: 50px;
    padding: 0 12px;

    section{
    }
  }
}
.marks::-webkit-scrollbar {
  display: none;/*隐藏滚动条*/
}
</style>
